<template>
  <div class="demo">
    <h2>学校名称：{{ name | mySlice }} (使用了plugin中的filter)</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">1.点我提示学校名（采用混入）</button>
    <br />
    <button @click="sendSchoolName2App">
      2.点我发送学校名给App（props方式）
    </button>
  </div>
</template>

<script>
// 引入混合，局部引入
import { myMixin } from '../maxin'
import pubsub from 'pubsub-js'
export default {
  name: 'School',
  data() {
    return {
      name: 'zjut要过滤',
      address: '杭州·西湖',
    }
  },
  props: ['getSchoolName'],
  methods: {
    // 采用混合
    /* showName() {
      alert(this.name);
    }, */
    sendSchoolName2App() {
      this.getSchoolName(this.name)
    },
  },
  mixins: [myMixin],
  mounted() {
    console.log('hello! 这是School自身的mounted')
    this.$bus.$on('busTest', (data) => {
      console.log("I'm School, I receive data", data)
    }) // 给bus绑定自定义事件
    this.pubId = pubsub.subscribe('pubsubTest', (msgName, data) => {
      console.log('School订阅了pubsubTest消息，接收到', msgName, data)
    })
  },
  beforeDestroy() {
    this.$bus.$off('busTest') // 解绑$bus上的事件
    pubsub.unsubscribe(this.pubId)
  },
}
</script>

<style scoped>
.demo {
  background-color: skyblue;
}
</style>
